<template>
    <p>基本指令</p>
    <p>a: {{a}}</p>

    <div v-html="spanHtml"></div>

    <p>v-bind</p>
    <img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
    <img v-bind:src="imgUrl">
    <img :src="imgUrl">

    <button v-on:click="btnAction">v-on</button>
    <button @click="btnAction">v-on-@</button>

    <p>v-if</p>
    <p v-if="random <0.5">0.5</p>
    <p v-else-if="random <0.8">0.8</p>
    <p v-else>大于0.8</p>
    <button @click="getRandom">产生随机数</button>
    <p>{{random}}</p>
    <p v-show="random<0.7">0.7</p>

    <p>v-for</p>
    <ul>
        <li v-for="(item,index) in todosArr">index:{{index}} - item:{{item}}</li>
    </ul>

    <ul>
        <li v-for="(value,key,index) in todosObj">{{key}}-{{value}}-{{index}}</li>
    </ul>
</template>

<script setup>
import {ref} from 'vue'

const a=ref(0)

const spanHtml = ref('<span>test</span>')

const imgUrl = '//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
const random=ref(0)

const todosArr = ref([
    '起床',
    '打扫卫生',
    '看电视剧',
    '吃饭',
    '睡觉',
])

const todosObj = ref({
    '8':'起床',
    '9':'打扫卫生',
    '10':'看电视剧',
    '11':'吃饭',
    '12':'睡觉',
})

const btnAction =()=>{
    alert(1)
}
const getRandom =()=>{
    random.value=Math.random();
}
</script>

